<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>Tables - Ace Admin</title>

    <meta name="description" content="Static &amp; Dynamic Tables"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="../../assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../assets/font-awesome/4.5.0/css/font-awesome.min.css"/>

    <!-- page specific plugin styles -->

    <!-- text fonts -->
    <link rel="stylesheet" href="../../assets/css/fonts.googleapis.com.css"/>

    <!-- ace styles -->
    <link rel="stylesheet" href="../../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="../../assets/css/ace-part2.min.css" class="ace-main-stylesheet"/>
    <![endif]-->
    <link rel="stylesheet" href="../../assets/css/ace-skins.min.css"/>
    <link rel="stylesheet" href="../../assets/css/ace-rtl.min.css"/>

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="../../assets/css/ace-ie.min.css"/>
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->
    <script src="../../assets/js/ace-extra.min.js"></script>

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

    <!--[if lte IE 8]>
    <script src="../../assets/js/html5shiv.min.js"></script>
    <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="no-skin">

<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {
        }
    </script>


    <div class="main-content">
        <div class="main-content-inner">

            <div class="page-content">


                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <div class="row">
                            <div class="col-xs-12">
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                            活动名称: </label>

                                        <div class="col-sm-9">
                                            <input type="text" id="form-field-1" placeholder="活动名称"
                                                   class="col-xs-10 col-sm-5"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                            成本: </label>

                                        <div class="col-sm-9">
                                            <input type="text" id="form-field-1" placeholder="成本"
                                                   class="col-xs-10 col-sm-5"/>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                                            活动时间: </label>

                                        <div class="col-sm-4"
                                        ">
                                        <div class="widget-body">
                                            <div class="col-sm-13">
                                                <div class="input-daterange input-group">
                                                    <input type="text" class="input-sm form-control" placeholder="开始时间"
                                                           name="start"/>
                                                    <span class="input-group-addon">
																		<i class="fa fa-exchange"></i>
																	</span>

                                                    <input type="text" class="input-sm form-control" placeholder="结束时间"
                                                           name="end"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 描述: </label>
                                <div class="col-xs-12 col-sm-4">
                                    <div>
                                        <textarea class="form-control limited" id="form-field-9"
                                                  maxlength="50"></textarea>
                                    </div>
                                </div><!-- /.span -->
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 所有者: </label>
                                <div class="col-xs-12 col-sm-4">
                                    <select class="form-control" id="form-field-select-1">
                                        <option value="">张三</option>
                                        <option value="">李四</option>
                                        <option value="">王五</option>
                                        <option value="">赵六</option>
                                    </select>

                                </div><!-- /.span -->
                            </div>
                            <div class="clearfix ">
                                <div class="col-md-offset-3 col-md-9">
                                    <button class="btn btn-info" type="button">
                                        <i class="ace-icon fa fa-check bigger-110"></i>
                                        添加
                                    </button>

                                    &nbsp; &nbsp; &nbsp;
                                    <button class="btn" type="reset">
                                        <i class="ace-icon fa fa-undo bigger-110"></i>
                                        重置
                                    </button>
                                </div>
                            </div>
                            </form>

                        </div><!-- /.row -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->


</div><!-- /.main-container -->

<script src="../../assets/js/jquery-2.1.4.min.js"></script>

<script type="text/javascript">
    if ('ontouchstart' in document.documentElement) document.write(
        "<script src='../../assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/jquery-ui.custom.min.js"></script>
<script src="../../assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="../../assets/js/chosen.jquery.min.js"></script>
<script src="../../assets/js/spinbox.min.js"></script>
<script src="../../assets/js/bootstrap-datepicker.min.js"></script>
<script src="../../assets/js/bootstrap-timepicker.min.js"></script>
<script src="../../assets/js/moment.min.js"></script>
<script src="../../assets/js/daterangepicker.min.js"></script>
<script src="../../assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="../../assets/js/bootstrap-colorpicker.min.js"></script>
<script src="../../assets/js/jquery.knob.min.js"></script>
<script src="../../assets/js/autosize.min.js"></script>
<script src="../../assets/js/jquery.inputlimiter.min.js"></script>
<script src="../../assets/js/jquery.maskedinput.min.js"></script>
<script src="../../assets/js/bootstrap-tag.min.js"></script>

<!-- ace scripts -->
<script src="../../assets/js/ace-elements.min.js"></script>
<script src="../../assets/js/ace.min.js"></script>
<script src="../../assets/locales/bootstrap-datepicker.zh-CN.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
    jQuery(function ($) {

        //or change it into a date range picker
        $('.input-daterange').datepicker({
            autoclose: true,
            format: "yyyy-mm-dd",
            language: 'zh-CN'
        });

    });
</script>
</body>
</html>
